<template>
  <el-drawer title="添加书籍" :visible.sync="drawer" size="80%" :before-close="handleClose">
    <div class="flex-box">
      <article class="innerPage bookList left">
        <section class="graphical">
          <SearchCondition :formItemList="formItemList" :emitSearch="emitSearch" :resetSearch="resetSearch" @search="search" ref="mychild" />
        </section>
        <div class="decorate"></div>
        <section class="graphical2">
          <div class="btn_add" style="
            display: flex;
            align-items: center;
            justify-content: flex-start;
          ">
            <!-- <el-button icon="el-icon-circle-plus-outline" class="btn-green icon-fontSize" @click="openAddDrawer">添加书籍</el-button> -->
          </div>
          <div>
            <el-table :data="tableData" class="tableStyle" @selection-change="selectionChange" :header-cell-style="$headerCellStyle" :border="$isborder" size="mini" ref="elTable" stripe>
              <el-table-column prop="key" label="序号" label-class-name="indexColumn" align="center" fixed="left" :width="$widtha">
              </el-table-column>
              <el-table-column label="图片" align="left" prop="img" show-overflow-tooltip>
                <template slot-scope="{row}">
                  <img class="cover" :src="row.img" alt="">
                </template>
              </el-table-column>
              <el-table-column label="书籍名称" align="left" prop="book_name" show-overflow-tooltip>
                <template slot-scope="{row}">《{{ row.title }}》</template>
              </el-table-column>

              <el-table-column label="作者" align="left" prop="author" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="出版社" align="left" prop="press" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="来源" align="left" prop="resource_business_id" show-overflow-tooltip>
                <template slot-scope="{row}">
                  {{ formItemList[1].selectOptions?.filter(item => item.value==row.resource_business_id)?.[0]?.name || '' }}
                </template>
              </el-table-column>

              <el-table-column label="ISBN" align="left" prop="isbn" show-overflow-tooltip>
              </el-table-column>
              <el-table-column label="出版时间" align="left" prop="pre_time" show-overflow-tooltip>
              </el-table-column>

              <el-table-column label="操作" fixed="right" :header-align="$heaerOpt" align="left">
                <template slot-scope="scope">
                  <div @click="AddBook(scope.row)" v-if="!isSelected(scope.row.guid)" class="details-box">
                    添加
                  </div>
                  <div v-else class="remove" @click="removeSelectRows(scope.row.id)">移除</div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </section>
        <footer class="pagination">
          <div>
            <el-pagination background prev-text="上一页" next-text="下一页" layout="prev, pager, next, jumper" :total="listTotal" :page-size="10" @current-change="handleCurrentChange" :current-page.sync="currentPage1">
            </el-pagination>
            <div class="pagination_go">
              <el-button type="primary" @click="">确定</el-button>
            </div>
          </div>
          <p>
            共
            <span>{{ listTotal || 0 }}</span>
            数据
          </p>
        </footer>
      </article>
      <div class="right">
        <div class="label">
          表格中的选中数据
        </div>
        <!-- <div class="r_item" v-for="item in selectRows"> {{ item.book_name }}</div> -->
        <el-collapse class="collapse">
          <div v-for="item in selectRows" class="collapseItemBox">
            <div class="r_remove">
              <!-- <el-button icon="el-icon-delete" style="color:red" type="text" size="medium"></el-button> -->
              <el-button class="btn" type="danger" size="mini" icon="el-icon-minus" circle @click="removeSelectRows(item.guid)"></el-button>
            </div>
            <el-collapse-item :title="`《${item.title}》`">
              <el-row :gutter="10">
                <el-col :span="12" class="r_col">
                  <div class="r_label"> 名称：</div>
                  <div class="r_value">《{{ item.title }}》</div>
                </el-col>
                <el-col :span="12" class="r_col">
                  <div class="r_label">作者：</div>
                  <div class="r_value">{{item.author}}</div>
                </el-col>
                <el-col :span="12" class="r_col">
                  <div class="r_label">价格：</div>
                  <div class="r_value">{{item.price}}</div>
                </el-col>
                <el-col :span="12" class="r_col">
                  <div class="r_label">出版社：</div>
                  <div class="r_value">{{item.press}}</div>
                </el-col>
                <el-col :span="12" class="r_col">
                  <div class="r_label">编号：</div>
                  <div class="r_value">{{item.book_num}}</div>
                </el-col>
                <el-col :span="12" class="r_col">
                  <div class="r_label">ISBN：</div>
                  <div class="r_value">{{item.isbn}}</div>
                </el-col>
                <el-col :span="12" class="r_col">
                  <div class="r_label">出版时间：</div>
                  <div class="r_value">{{item.pre_time}}</div>
                </el-col>
                <!-- <el-col :span="12">
                <div class="r_label">书籍名称</div>
                <div class="r_value"></div>
              </el-col> -->

              </el-row>
            </el-collapse-item>
          </div>
        </el-collapse>
        <div class="action">
          <el-button class="btn_cancel" @click="clearSelect">清空</el-button>
          <el-button class="btn-blue" @click="AddBookSubmit">确定</el-button>
        </div>
      </div>
      <div>
        <Ddlmoadl ref="isdel" @deletesuccess="deletesuccess"></Ddlmoadl>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import Ddlmoadl from "@/components/Deletebtn/Deletetk.vue";

export default {
  name: "drawerAdd",
  components: {
    Ddlmoadl,
  },
  data() {
    return {
      selectRows: [],
      drawer: false,
      formItemList: [
        {
          label: "关键词",
          type: "input",
          param: "keywords",
        }, {
          label: '来源',
          type: 'select',
          param: 'resource_business_id',
          selectOptions: []
        }
      ],
      searchList: {
        start_time: "",
        end_time: "",
        keywords: "",
        node: "",
        pattern: "",
        is_play: "",
        system_unit_id: "",
      },
      emitSearch: false,
      resetSearch: true,
      tableData: [],
      page: 1,
      listTotal: 0,
      currentPage1: 1,
      dialogVisible: false, //详情框
      particularsdata: {},
      deldialog: false, // 删框
      delid: "",
      isid: "",
      istype: "",
      typeid: "",
      copyType: "",
      idindex: "",
      is_super_admin: "false",
    };
  },

  mounted() { },

  activated() {
    if (this.$route.params.action === "refresh") {
      this.page = 1;
      this.listTotal = 0;
      this.currentPage1 = 1;
      this.tableData = [];
    }
    // this.getList();
    this.$refs?.elTable?.doLayout();
    //  this.setPageTabs();
  },
  computed: {
    defaultImg() {
      return 'this.src="' + require("@/assets/img2/feng_shibaiimg.png") + '"';
    },
  },
  methods: {
    clearSelect() {
      this.selectRows = []
    },
    removeSelectRows(guid) {
      this.selectRows = this.selectRows.filter(item => item.guid != guid)
    },
    isSelected(guid) {
      return this.selectRows.map(item => item.guid).includes(guid)
    },
    handleClose(done) {
      done()
    },
    open() {
      this.drawer = true
      this.getList()
    },
    AddBook(row) {
      this.selectRows.push(row)
    },
    AddBookSubmit() {
      if (!this.selectRows?.length) {
        this.$message.warning('请添加书籍');
        return
      }
      const ids = this.selectRows.map(item => item.id).join(',')

      this.request({ url: "/admin/resourceSystemTypeIntention/add", method: "post", data: { resource_system_type_id: this.$route.query.id, resource_ids: ids } }).then(res => {
        this.$emit('refresh')
        this.clearSelect()
        this.drawer = false

        this.$message.success(res.msg);
      })
    },
    selectionChange(val) {

      console.log(val)
    },
    //复制作品请求
    async copyPost(id, pwd) {
      try {
        let res = await this.request({
          url: "/admin/answerActivity/copyData",
          method: "post",
          data: {
            act_id: id,
            password: pwd,
          },
        });
        if (res) {
          this.$message.success(res.msg);
          this.$refs.pwd.showdialog2();
          setTimeout(() => {
            this.getList();
          }, 2000);
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },

    //获取数据
    async getList() {
      try {
        let res = await this.request({
          url: "/admin/resourceSystemTypeIntention/getResourceSystemTypeResourceData",
          method: "get",
          loading: true,
          data: {
            except_resource_system_type_id: this.$route.query.id,
            resource_business_id: '',
            page: this.page,
            limit: 10,
            ...this.searchList,
          },
        });
        if (res) {
          this.tableData = res.content.data;
          this.listTotal = res.content.total;
          this.currentPage1 = res.content.current_page;
        }
      } catch (err) {
        let error = err.message.split("/");
        if (error[0] == 203) {
          this.tableData = [];
          this.listTotal = 0;
        }
        this.errorHandler(err);
      }
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    // 搜索条件改变时
    search(params) {
      this.searchList = params;
      this.page = 1;
      this.getList();
    },
    // 跳转详情页
    // async particulars(id, row) {
    //   this.$router.push({
    //     path: "/answerActivities/activityList/activitInfo",
    //     query: {
    //       id: id,
    //       is_apply: row.is_play,
    //     },
    //   });
    // },
    //删除弹框
    async remove(id) {
      this.delid = id;
      this.$refs.isdel.delshow(id);
    },
    // 弹框确认后的回调
    async deletesuccess() {
      try {
        let res = await this.request({
          url: "/admin/bookHomeReadingListLib/del",
          method: "post",
          loading: true,
          data: {
            id: this.delid,
          },
        });
        if (res) {
          this.$message.success(res.msg);
          let that = this;
          setTimeout(() => {
            that.getList();
          }, 2000);
        }
      } catch (err) {
        this.errorHandler(err);
      }
    },
    // 前往页面
    toPage(path, row) {
      this.$router.push({
        path: path,
        query: {
          id: row.id,
        },
      });
    },
    getResourceOptions() {
      this.request({ url: '/admin/resourceBusinessName/filterList' }).then(res => {
        this.formItemList[1].selectOptions = [{ value: 0, name: '全部' }].concat(res.content.map(item => {
          return {
            value: item.id,
            name: item.name
          }
        }))
      }).catch(e => this.errorHandler(e))
    }
  },
  created() {
    this.getResourceOptions()
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.cover {
  width: 50;
  height: 70px;
}
.flex-box {
  display: flex;
  .left {
    width: calc(100% - 300px);
  }
  .right {
    width: 400px;
    border-left: 10px solid #eff3f1;
    padding: 0 10px;
    .action {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
.remove {
  color: #f56c6c;
  cursor: pointer;
}
.collapse {
  margin-top: 10px;
  height: calc(100vh - 200px);
  overflow-y: scroll;
  .collapseItemBox {
    position: relative;
    :deep(.el-collapse-item__header) {
      padding-left: 40px;
    }
    .r_remove {
      position: absolute;
      left: 0;
      top: 13px;
      .btn {
        width: 20px;
        height: 20px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}
.r_col {
  display: flex;
  gap: 5px;
  .r_value {
    height: 20px;
    width: 90px;
    overflow: hidden; /* 超出部分隐藏 */
    display: -webkit-box; /* 对象作为伸缩盒子模型显示 */
    -webkit-box-orient: vertical; /* 设置伸缩盒对象的子元素的排列方式 */
    -webkit-line-clamp: 1; /* 允许盒子显示几行 */
  }
}
.btn_cancel {
  width: 80px;
  height: 40px;
  background: #f2f2f2;
  border-radius: 5px;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  text-align: center;
  color: #000000;
  line-height: 40px;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>

